<template>
  <div>
    <el-row>
      <el-col :span="14">工单所需配件列表</el-col>
    </el-row>
    <el-row v-if="workUserList.length>0">
      <data-table
        :value="partsList"
        :total-count="partsList.length"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :localPage="true"
      >
        <template #allNum>
          <div class="tabelAomut">
            <div>项目总金额：<span>￥{{totalAmount}}</span></div>
            <div>项目优惠金额：<span>￥{{totalAmount-totalDiscountAmount}}</span></div>
            <div>项目折后总金额：<span>￥{{totalDiscountAmount}}</span></div>
          </div>
        </template>
        <template #action="{ row,index }">
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"

            @click="delTabelData(index)"
          ></i>
        </template>
      </data-table>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :append-to-body="true"
      :width="'1000px'"
      @close="dialogClose"
    >
      <SelectAccessories
        v-if="dialogTitle == '配件选择'"
        :storageId="8"
        @partsList="getPartsList"
      />
    </el-dialog>
  </div>
</template>
<script>
import DataTable from '@/components/DataTable'
import SelectAccessories from '@/components/SelectAccessories/index' //配件选择组件
import { getUserOrTem } from '@/utils/index';
export default {
  components: {
    DataTable,
    SelectAccessories,
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    list: {
      default: () => { return [] },
    }
  },
  data () {
    return {
      visible: false,
      dialogTitle: '',
      partsList: [],//项目列表
      workUserList: [],//班组或员工列表
      tableColumnAttributes: [
        // { name: '所属项目', value: 'storeId', type: 'text' },
        { name: '配件编号', value: 'partsCode', type: 'text' },
        { name: '配件名称', value: 'partsName', type: 'text' },
        { name: '配件类型', value: 'partsType', type: 'text' },
        { name: '配件单位', value: 'partsUnit', type: 'text' },
        { name: '所需数量', value: 'num', type: "inputNumber" },
        // { name: '库存余额', value: 'stockNum', type: 'text' },
        { name: '配件金额', value: 'partsPrice', type: 'text' },
        { name: '折扣', value: 'discount', type: 'inputNumber', max: 10, },
        {
          name: '折后金额', value: 'discountAmount', type: 'render',
          render: this.discountAmount,
        },
        { name: '总金额', value: 'amount', type: 'text', },
        { name: '状态', value: 'status', type: 'render', color: "color:#85ce61" },
        {
          name: '收费类型', value: 'tollType',
          type: 'select',
          valueId: 'tollType',
          options: [
            { index: 1, id: '自费', value: '自费' },
            { index: 2, id: '免费保养', value: '免费保养' },
            { index: 3, id: '索赔', value: '索赔' },
            { index: 4, id: '返工', value: '返工' },
            { index: 5, id: '保险', value: '保险' },
          ]
        },
        { name: '作业人员/班组', value: 'pickId', type: 'select', options: [] },
      ],
      totalAmount: 0,//总金额
      totalDiscountAmount: 0 //折后总金额
    }
  },
  watch: {
    partsList: {
      deep: true,
      handler (newValue, oldValue) {
        this.totalAmount = 0;
        this.totalDiscountAmount = 0;
        newValue.forEach((item, index) => {
          item.amount = item.num ? Number(item.num * item.partsPrice) : 0;
          this.totalAmount += Number(item.amount);
          this.totalDiscountAmount += Number(this.discountAmount(item));
        })
        this.$emit("setTotalAmount");
      }
    },
    list: {
      deep: true,
      handler (newValue, oldValue) {
        if (Array.isArray(newValue) && newValue.length > 0) {
          this.partsList = [];
          this.getPartsList(newValue)
        }
      }
    }
  },
  computed: {},
  methods: {
    //计算折扣
    discountAmount (row, value) {
      let sum = row.num ? row.num * row.partsPrice : 0, _amount = 0;
      if (row.tollType && (row.tollType == '免单' || row.tollType == '返工')) {
        _amount = 0;
      } else {
        _amount = sum;
        if (row.discount > 0) {
          _amount = sum * Number(row.discount / 10);
        }
      }
      return _amount
    },
    handleDataInsert (title) {
      this.visible = true;
      this.dialogTitle = title;
    },
    //表单删除
    delTabelData (index) {
      this.partsList.splice(index, 1);
    },
    //弹窗选择
    getPartsList (list, partsList) {
      list.forEach(e => {
        e.partsUnit = e.unit;
        e.carPartsId = e.id;
        e.partsType = e.partsDictValue;
        e.stockNum = e.internalNum;
        e.partsPrice = e.storagePrice;
        e.discount = 10;
        e.status = e.status ? '已出库' : '未出库';
        delete e.id;
      });
      this.partsList = this.partsList.concat(list);
      this.dialogClose();
    },
    dialogClose () {
      this.visible = false;
    },
  },
  async created () {
    this.partsList = this.list;
    let arry = await getUserOrTem();
    this.workUserList = arry;
    this.tableColumnAttributes[this.tableColumnAttributes.length - 1].options = this.workUserList;
  }
}
</script>
<style lang="scss" scoped>
.greeColor {
  color: #85ce61;
}
</style>
